<template>
    <div class="pro-list g-mt10">
      <Row class="g-mt10">
        <i-col :md="5" :sm="8" :xs="12" class="pro-item transiti g-mb20" v-for="item in proList" :key="item.id">
          <a href="#" class="link-wrap">
            <div class="pic-wrap">
              <img src="/static/images/dot.jpg" alt="..." />
            </div>

            <div class="pro-des g-mt10">
              <p class="text-des">必不可少的描述</p>
              <p class="price">$<em>50.00</em></p>
            </div>

            <div class="btn-wrap g-mt10">
              <a href="#" @click="join(item)" class="btn btn-min join-cart g-mr5">加入购物车</a>
              <a href="#" class="btn btn-min go-buy">立即购买</a>
            </div>
          </a>
        </i-col>
      </Row>

      <Row class="loading-more">
        <i-col :span="24">
          <Button type="primary" :loading="loading" @click="loadingMore" ref="prolist">
            <span v-if="!loading">Click me!</span>
            <span v-else>Loading...</span>
          </Button>
        </i-col>
      </Row>

      <slot></slot>
    </div>
</template>

<script type="text/ecmascript-6">

    export default {
      props: {
        currentPage: {
          type: Number,
          default: 1
        },
        allPage: {
          type: Number,
          default: 10
        },
        display: {
          type: Number,
          default: 8
        },
        proList: {
          type: Array,
          default: []
        }
      },
      data() {
        return {
          loading: false
        }
      },
      components: {

      },
      methods: {
        loadingMore() {
          this.loading = true
          this.$emit('loadingmore', this.loading)
        },
        join(item) {
          this.$emit('select', item)
        }
      },
      watch: {
        proList() {
          this.loading = false
        }
      }
    }
</script>

<style scoped lang="stylus" rel="stylesheet/stylus">
  @import "~@/common/stylus/variable.styl"
  @import "~@/common/stylus/mixin.styl"

  .pro-list
    position: relative
    min-height: 800px
    padding-bottom: 80px
    .pro-item
      margin: 0 33px 20px
      padding: 20px 10px 10px
      border: 1px solid #eee
      cursor: pointer
      &:nth-child(4n)
        margin-right: 0
      &:nth-child(4n + 1)
        margin-left: 0
      .link-wrap
        .pic-wrap
          font-size: 0
          img
            display: block
            width: 90%
            margin: 0 auto
        .pro-des
          p.text-des
            height: 40px
            line-height: 20px
            overflow: hidden
          p.price
            hh(20px)
            em
              margin-left: 5px
              font-weight: bold
              sc($font-small-x, $back)
        .btn-wrap
          border-radius: 4px
          padding: 5px 0
          .btn
            hh(30px)
          .go-buy
            background-color: $back
            &:hover
              color: $white
              background-color: #515151
          .join-cart
            background-color: #ee2737
            &:hover
              color: $white
              background-color: #ee5767
        &:hover
          color: inherit
      &:hover
        border-color: $vice-color
        box-shadow: 0px 0px 10px 1px $vice-color
  .loading-more
    lbposition(0, 24px)
    wh(100%, 32px)
    text-align: center
</style>
